﻿@model OrderModel.OrderNote

@{
    var parentModel = ViewData["Parent"] as OrderModel;
}

<datagrid id="ordernotes-grid" class="h-100"
          allow-resize="true"
          allow-row-selection="true"
          preserve-grid-state="true" preserve-command-state="true"
          allow-column-reordering="true">
    <datasource read="@Url.Action("OrderNoteList", new { orderId = parentModel.Id })" 
                delete="@Url.Action("OrderNoteDelete", new { orderId = parentModel.Id })" />
    <sorting enabled="false">
        <sort by="CreatedOn" by-entity-member="CreatedOnUtc" descending="true" />
    </sorting>
    <paging position="Bottom" show-size-chooser="false" enabled="false" />
    <toolbar>
        <toolbar-group>
            <button datagrid-action="DataGridToolAction.InsertRow" href="#add-ordernote-dialog" data-toggle="modal" class="btn btn-primary btn-flat">
                <i class="fa fa-plus"></i>
                <span>@T("Admin.Orders.OrderNotes.AddButton")</span>
            </button>
        </toolbar-group>
        <zone name="datagrid_toolbar_alpha"></zone>
        <toolbar-group class="omega"></toolbar-group>
        <zone name="datagrid_toolbar_omega"></zone>
        <toolbar-group>
            <button datagrid-action="DataGridToolAction.DeleteSelectedRows" type="button" class="btn btn-danger btn-flat">
                <i class="far fa-trash-can"></i>
                <span>@T("Admin.Common.Delete.Selected")</span>
            </button>
        </toolbar-group>
    </toolbar>
    <columns>
        <column for="CreatedOn" entity-member="CreatedOnUtc" />
        <column for="Note" width="3fr" hideable="false" encoded="true" wrap="true" />
        <column for="DisplayToCustomer" halign="center" />
    </columns>
    <row-commands>
        <a datarow-action="DataRowAction.Delete">@T("Common.Delete")</a>
    </row-commands>
</datagrid>

<modal id="add-ordernote-dialog" sm-render-at-page-end="true" sm-size="Large">
    <modal-header sm-title="@T("Admin.Orders.OrderNotes.AddButton")"></modal-header>
    <modal-body>
        <form method="post">
            <div class="adminContent">
                <div class="adminRow">
                    <div class="adminTitle">
                        <smart-label asp-for="Note" />
                    </div>
                    <div class="adminData">
                        <editor asp-for="Note" />
                    </div>
                </div>
                <div class="adminRow">
                    <div class="adminTitle">
                        <smart-label asp-for="DisplayToCustomer" />
                    </div>
                    <div class="adminData">
                        <input asp-for="DisplayToCustomer" />
                    </div>
                </div>
            </div>
        </form>
    </modal-body>
    <modal-footer>
        <button class="btn btn-secondary btn-flat" data-dismiss="modal">
            <span>@T("Common.Cancel")</span>
        </button>
        <button id="add-order-note" class="btn btn-primary">
            <span>@T("Admin.Orders.OrderNotes.AddButton")</span>
        </button>
    </modal-footer>
</modal>


<script sm-target-zone="scripts" data-origin="ordernotes-grid">
    $(function () {
        $('#add-order-note').on('click', function () {
            var noteField = $("#@Html.IdFor(model => model.Note)");
            var displayToCustomer = $("#@Html.IdFor(model => model.DisplayToCustomer)").is(':checked');

            $.ajax({
                cache: false,
                type: 'POST',
                url: '@(Url.Action("OrderNoteInsert", "Order", new { area = "Admin" }))',
                data: {
                    "DisplayToCustomer": displayToCustomer,
                    "message": noteField.val(),
                    "orderId": @parentModel.Id,
                },
                success: function () {
                    const orderNotesGrid = $('#ordernotes-grid').parent().data('datagrid');
                    orderNotesGrid.read();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    displayNotification('Failed to add order note.', 'error');
                },
                complete: function () {
                    $('#add-ordernote-dialog').modal('hide');
                    noteField.val('');
                }
            });
        });
    });
</script>